<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/statics/layui/font/font.css" media="all"/>
    <link rel="stylesheet" href="/static/css/buildUnit/common.css">
    <link rel="stylesheet" href="/lib/jqueryZtree/3.5.12/css/zTreeStyle/zTreeStyle.min.css">
    <script type="text/javascript" src="/lib/jquery/jquery.js" charset="utf-8"></script>
    <script type="text/javascript" src="/lib/jqueryZtree/3.5.12/js/jquery.ztree.all-3.5.js"
            charset="utf-8"></script>
    <style type="text/css">
        .ztree li span.button.ico_open {
            margin-right: 2px;
            background: url(/lib/jqueryZtree/3.5.12/css/zTreeStyle/img/zTreeStandard.png) no-repeat scroll -110px -32px transparent !important;
            vertical-align: top;
            *vertical-align: middle
        }

        .ztree li span.button.ico_close {
            margin-right: 2px;
            background: url(/lib/jqueryZtree/3.5.12/css/zTreeStyle/img/zTreeStandard.png) no-repeat scroll -110px -32px transparent !important;
            vertical-align: top;
            *vertical-align: middle
        }

        .ztree li span.button.ico_docu {
            margin-right: 2px;
            background: url(/lib/jqueryZtree/3.5.12/css/zTreeStyle/img/zTreeStandard.png) no-repeat scroll -110px -32px transparent !important;
            vertical-align: top;
            *vertical-align: middle
        }

        html, body {
            height: 100%;
        }

        .chooseBox {
            border: 1px solid #ddd;
            height: 300px;
            padding: 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            overflow-y: auto;
        }

        .leftBox > p {
            line-height: 30px;
            padding-left: 20px;
            cursor: pointer;
        }

        .leftBox > p:hover {
            background: #ddd;
        }

        .leftBox > p.selected {
            background: #d5d5d5;
        }
        .borderBox{
            padding:10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="layui-fluid" style="height:100%;">
    <form class="layui-form" lay-filter="formData">
        <input type="hidden" name="roleId" id="roleId" class="formData">
        <input type="hidden" id="roleOrgType" name="roleOrgType" class="formData">
        <table class="layui-table v-table">
            <tbody>
            <tr>
                <td class="th8 required">角色名称</td>
                <td>
                    <input type="text" name="roleName" id="roleName" lay-verify="isEmpty" placeholder="角色名称"
                           autocomplete="off" class="layui-input formData">
                </td>
                <td class="th8 required">角色编码</td>
                <td colspan="3">
                    <input type="text" name="roleCode" id="roleCode" lay-verify="isEmpty" placeholder="角色编码"
                           autocomplete="off" class="layui-input formData">
                </td>
            </tr>
            </tbody>
        </table>
        <button class="layui-btn search" lay-submit id="submit" style="display: none;">提交</button>
    </form>
    <div class="layui-row">
        <div class="layui-col-xs4 borderBox">
            <div class="layui-card-header">企业类型</div>
            <div class="leftBox chooseBox">
            </div>
        </div>
        <div class="layui-col-xs4 borderBox">
            <div class="layui-card-header">菜单权限</div>
            <div class="rightBox chooseBox">
                <div id="tuzhiTree" class="ztree"></div>
            </div>
        </div>

        <div class="layui-col-xs4 borderBox">
            <div class="layui-card-header">流程权限</div>
            <div class="rightBox chooseBox">
                <div id="liucheng" class="layui-form-item">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/lib/layui/layui.js"></script>
<script src="/static/js/main.js"></script>
<!--<script type="text/javascript" src="../../../statics/js/sys/editDict.js"  charset="utf-8"></script>-->
<script>
    var ztree = {};
    layui.use(['form', 'sessionFun', 'configure', 'configureCom', 'ztree'], function () {
        window.$ = layui.$;
        var form = layui.form;
        var configure = layui.configure;
        ztree = layui.ztree;
        var configureCom = layui.configureCom;
        var sessionFun = layui.sessionFun;
        var listData = sessionFun.get(configure.SESSION_LIST_DATA);
        if (listData) {
            ztree.param.checkData = listData.menuIdList;
            menuZtreeFun(listData.roleOrgType);
            PER_PROCESS(listData.roleOrgType);
            form.val('formData', listData);
        }
        form.on('submit', function (data) {
            return false;
        });
        form.render();
        configureCom.postDataAjax(configure.ORG_TYPE_HTTP, {}).then(function (res) {
            var html = '';
            var selectedType = '';
            $(res.list).each(function (index, item) {
                try {
                    selectedType = listData.roleOrgType == item.value ? "selected" : ""
                } catch (err) {
                    selectedType = '';
                }
                html += '<p data-id="' + item.value + '" class="' + selectedType + '">' + item.name + '</p>';
            });
            $('.leftBox').html(html);
        });

        $('.leftBox').on('click', 'p', function () {
            var typeId = $(this).attr('data-id');
            $(this).addClass('selected').siblings('p').removeClass('selected');
            $('#roleOrgType').val(typeId);
            //加载菜单权限
            menuZtreeFun(typeId);
            //加载流程权限
            PER_PROCESS(typeId);
            form.render();
        });

        function menuZtreeFun(typeId) {
            //ztree初始化
            configureCom.postDataAjax(configure.ROLE_MENU_LIST_HTTP, {menuOrgType: typeId}).then(function (res) {
                //将数据格式转变，自定义第二级图标
                $(res.result).each(function (index, item) {
                    item.url = '';
                    $(item.children).each(function (i, p) {
                        p.url = '';
                    })
                });
                ztree.param.idKey = 'menuId';//父级id
                ztree.param.pIdKey = 'parentId';//子级中与父级id关联
                ztree.param.rootPId = '0';//根节点id

                console.log(res.result)

                ztree.init('tuzhiTree', '', res.result);
            });
        };

        //加载流程权限
        function PER_PROCESS(typeId){
            $('#liucheng').html("");
            var groupCode="";

            if(typeId=='1'){ //建设单位
                groupCode="JSDW_PROC_PERMIS";
            } else if(typeId=='5'){
                groupCode="JGDW_PROC_PERMIS";
            } else if(typeId=='6'){  //运维单位
                groupCode="";
                return false;
            }
            configureCom.postDataAjax(configure.QUERYALL_DICT_HTTP, {code: groupCode}).then(function (res) {
                var html = '';
                var selectedType = '';
                $(res.list).each(function (index, item) {
                    var processCodeList=listData.processIdList;
                    if(processCodeList){
                        for(var i=0;i<processCodeList.length;i++){
                        selectedType =processCodeList[i] == item.value ? "checked" : "";
                        if(selectedType!=""){
                            break;
                        }
                      }
                    }

                    html += '<p data-id="' + item.value + '" class="' + selectedType + '"> <input type="checkbox" value="'+item.value+'" name="processIdList"  '+selectedType+'/>&nbsp;' + item.name + '</p>';
                });
                $('#liucheng').html(html);
                form.render();
            });
        }
    });

    function getData() {
        try{
            var list = treeobj.getCheckedNodes();
        }catch(err){
            layer.msg('请选择单位类型')
        }
        var data = {};
        if (!window.formVerifyFun()) {
            return false;
        }
        $('.formData').each(function (index, item) {
            var key = $(item).attr('name');
            data[key] = $(item).val();
        });
        var menuIdList = '';
        $(list).each(function (index, item) {
            if (!index) {
                menuIdList += item.menuId;
            } else {
                menuIdList += ',' + item.menuId;
            }
        });
        var processIdList="";
        $("input:checkbox[name='processIdList']:checked").each(function () {
             if(processIdList==""){
                 processIdList +=$(this).val();
             }else{
                 processIdList +=',' +$(this).val();
             }
        });

        data.processIdList = processIdList;
        data.menuIdList = menuIdList;
        return data;
    }
</script>
</body>
</html>
